*{
	margin: 0px;
	padding: 0px;
}

.biaoti{
	width:100%;
	height:35px;
	border: 1px solid #ddd;
	
	line-height: 35px;
	text-align: center;
	background-color:#CCCCCC;
	color:#008000;
}
#biaoti1{
	width:100%;
	height:35px;
	border: 1px solid #ddd;
	margin-top:45px;
	line-height: 35px;
	text-align: center;
	background-color:#CCCCCC;
	color:#008000;
}

.box0{
	height:80px;
	width:80px;
	border:1px solid #000000;
	margin-top:10px;
	background-color: #008000;
	-webkit-transform:translate(20px,30px);
	position:relative;
	top:-80px;
	margin-left: 30px;
	
}

.box1{
	margin-left: 30px;
	height:80px;
	width:80px;
	border:1px solid #000000;
	margin-top:10px;
	background-color: #6D6D72;
	
}

.box2{
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box3{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 30px;
	-webkit-transform:rotate(30deg);
	background-color: rgba(255,0,0,0.5);
}


.box4{
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box5{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 120px;
	margin-top:40px;
	background-color: rgba(255,0,0,0.5);
	-webkit-transform:scale(2,3);
}

.box6{
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box7{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 30px;

	background-color: rgba(255,0,0,0.5);
	-webkit-transform:skew(20deg,30deg);
	
}

.box8{
	
	margin-top:20px;
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box9{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 30px;

	background-color: rgba(255,0,0,0.5);
	-webkit-transform:rotateX(40deg);
	
}

.box10{
	
	margin-top:20px;
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box11{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 110px;
	position:relative;
	top:-80px;
	background-color: rgba(255,0,0,0.5);
	-webkit-transform:rotateY(45deg);
	
}


.box12{
	
	
	margin-left: 30px;
	width:80px;
	height:80px;
	border:1px solid #000000;
	background-color: rgba(0,255,0,0.5);
	
}

.box13{
	width:80px;
	height:80px;
	border:1px solid #000000;
	margin-left: 110px;
	position:relative;
	top:-80px;
	background-color: rgba(255,0,0,0.5);
	-webkit-transform:rotatez(45deg);
	
}


.boxwrap{
	-webkit-perspective:160;
	-webkit-perspective-origin: 50% 80%;
}

.box14{
	width:80px;
	height:80px;
	background-color: rgba(0,255,0,0.5);
	margin:0 auto;
	text-align: center;
	line-height: 80px;
	border:1px solid #000000;
	-webkit-transition:width 1s,-webkit-transform 2s,height 1s;
}




.box14:active{
	width:200px;
	height:200px;
	-webkit-transform:rotate(360deg);
	
}

.box14wrap{
	width:100%;
	height:300px;
	margin-top:50px;
	
}

.box15{
	width:80px;
	height:80px;
	background-color: rgba(0,255,0,0.5);
	margin:0 auto;
	text-align: center;
	line-height: 80px;
	border:1px solid #000000;
	-webkit-transition:width 1s,-webkit-transform 2s,height 1s;
}

.box15:active{
	width:200px;
	height:200px;
	
	-webkit-transform:rotateX(360deg);
}

.box15wrap{
	width:100%;
	height:300px;
	margin-top:50px;
	
}
